<template>
  <div class="partners-box">
    <div v-for="(item, index) in partners"
         :key="index"
         class="partner-side">
      <div class="side">{{ item.side }}</div>
      <ul class="partners-item-box">
        <li class="partners-item"
            v-for="(item2, index2) in item.partnersItem"
            :key="index2">
          <div class="pic">
            <img :src="item2.imgUrl"
                 alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const partners = [
      {
        side: "合作学会",
        partnersItem: [],
      },
      {
        side: "战略合作单位",
        partnersItem: [],
      },
      {
        side: "合作企业",
        partnersItem: [],
      },
    ];
    return {
      partners,
    };
  },
  methods: {},
};
</script>
<style scoped>
.side {
  font-size: 20px;
  color: #000;
  line-height: 1.5em;
  font-weight: bold;
  padding-bottom: 8px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side::after {
  content: "";
  width: 80px;
  height: 4px;
  background-color: #006699;
  position: absolute;
  left: 0;
  bottom: 0;
}
.partners-item-box {
  margin: 36px 0;
}
.partners-item-box::after {
  display: table;
  content: "";
  clear: both;
}
.partners-item {
  float: left;
  width: 196px;
  padding-right: 20px;
  margin-bottom: 10px;
}
.pic {
  transition: 0.3s;
  padding: 0 18px;
}
.partners-item:hover {
  box-shadow: 1px 1px 2px 2px rgba(116, 116, 116, 0.144);
}
</style>